<html>
	<head>
		<title></title>
		<style>
			.active{
				background:red;
			}
			div{
				width:200px;
				height:200px;
				border: black solid 1px;
				display:none;
			}
		</style>
	</head>
	<body>
		<input id="math" type="button" value="math" index="0" />
		<input id="english" type="button" value="english" index="1" />
		<input id="chinese" type="button" value="chinese" index="2" />
		<input id="education" type="button" value="education" index="2" />
		<div style="display:block;">紧急公告。。。。</div>
		<div>22222222222222222</div> 
		<div>33333333333333333</div>
		<div>66666666666666666</div>
	</body>
	<script>
		window.onload = function(){
			var obj_Input_Arr = document.getElementsByTagName("input");
			for(var i=0;i<obj_Input_Arr.length;i++){
				obj_Input_Arr[i].index = i;
				obj_Input_Arr[i].onclick = function(){
					var obj_Div_Arr = document.getElementsByTagName("div");
					for(var i=0;i<obj_Input_Arr.length;i++){
						obj_Input_Arr[i].className ="";
						obj_Div_Arr[i].style.display = "none";
					}
					this.className = "active";
					//alert(this.index);
					obj_Div_Arr[this.index].style.display = "block";
				}
			}
		}
	</script>
</html>